// 
// Settings style 
// -------------------------------------------------- 

.settings-container {
  .make-row(@grid-gutter-width);
  padding-top: 5px;
  background-color: #d2d2d2;
  .tab-content {
    background-color: @container-page-bg;
    padding: 40px 25px;
  }
}
.settings-navigation {
  .nav;
  .nav-tabs;
  margin: 0 25px;
  & > li {
    & > a {
      background-color: transparent;
      border-radius: 0;
      border-bottom: none;
      padding: 10px;
      @media (min-width: @screen-sm-min) {
	      padding: 21px;
      }
      &:hover,
      &:focus,
      &:active{
        background-color: transparent;
        border-color: transparent;
        text-decoration: underline;
      }
    }
    &.__premium {
      text-transform: uppercase;
      font-weight: bold;
    }
    &.active {
      color: @text-color;      
      a {
      	background-color: @container-page-bg;
        font-size: 20px;
      	padding: 5px 20px;

        @media (min-width: @screen-sm-min) {
      		font-size: 36px;
      		padding: 5px 35px;
      	}
        &:hover,
	      &:focus,
	      &:active{
	        background-color: @container-page-bg;
	        text-decoration: none;
	    }
      }
    }
  }
}

// 
// Portrait
// -------------------

.portrait-cnt {
  .make-row(@grid-gutter-width);
}
.portrait-cnt_left {
  .make-sm-column(4, @grid-gutter-width);
  text-align: center;
}
.portrait-cnt_right {
  .make-sm-column(8, @grid-gutter-width);   
}
.portrait-cnt_photo {
  border-bottom: 1px solid @border-color;

}
.portrait-cnt_photo-main {
  .profile_logo(200px);
  margin-bottom: 15px;
  img {
    border: 2px solid @blue-color;
  }
}
.portrait-cnt_photos-mini {
  a {
    margin: 0 5px 15px 5px;
    &:hover {
    	text-decoration: none;
    }
    img {
      border: 2px solid @blue-color;
    }
  }
  .profile_info_logo {
  	vertical-align: top;

  	&.__plus .el-icon-plus {
  		.btn-primary;
	    border-radius: 30px;
	    font-size: 16px;
	    padding: 20px;
	    background-color: @blue-color;
	    color: #fff;
	  }
	}
}
.portrait-cnt_interest {
	position: relative;
	margin-bottom: 20px;
  h3 {
  	margin-bottom: 15px;
    text-align: left;
  } 
  .float-tag {
  	top: 50px;
  }
}
.portrait-cnt_interest_field {
	.form-control;
	margin-bottom: 15px;
}
.portrait-cnt_interest_list {
  list-style: none;
  margin: 0;
  padding: 0;
  li {
  	display: inline-block;
    position: relative;
    padding-right: 15px;
    &:after {
      content:".";
      color: @border-color;
      font-size: 24px;      
      position: absolute;
      top: -14px;
      right: 3px;
    }
    &:last-child {
    	padding-right: 0;
      &:after {
        content:"";
      }
    }
    a {
    	cursor: pointer;
    	color: #494949;
    	&:hover {    		
    		color: @text-color;
    		text-decoration: none;
    	}
    }
  }
}
.portrait-cnt_info {
	.clearfix;
	border-bottom: 1px solid @border-color;
}

.portrait-cnt_info_i {
	.clearfix;
	margin-bottom: 20px;

	textarea {
		resize: vertical;
	}
}

.portrait-cnt_name {
	.form-control;
	.make-sm-column(9, 0);
	padding: 2px 10px;
	margin-bottom: 10px;
}
.portrait-cnt_sex {
	.make-sm-column(3, 0);
	margin-top: 5px;
	text-align: right;
	.portrait-cnt_sex_i {
		font-weight: normal;
		margin: 0 0 0 15px;
		label {
			margin: 0 0 0 5px;
			vertical-align: top;
		}
	}
}


.portrait-cnt_profession {
	.form-control;
	.make-sm-column(7, 0);
	padding: 2px 10px;
	margin-bottom: 10px;
}
.portrait-cnt_profession-action {
	.make-sm-column(5, 0);
	text-align: right;
	.el-icon-plus {
		color: @blue-color;
		cursor: pointer;
	}
}
/*
@media (min-width: @screen-xs-min) and (max-width: @screen-sm-max) {
	.portrait-cnt_name {
		.make-xs-column(9, 0);
	}
	.portrait-cnt_sex {
		.make-xs-column(3, 0);
	}
	.portrait-cnt_profession {	
		.make-xs-column(7, 0);
	}
	.portrait-cnt_profession-action {
		.make-xs-column(5, 0);
	}
}*/
.btn-add-profession {
	.button-primary;
	padding-right: 40px;
	padding-left: 40px;
	margin-right: 20px;
}

.portrait-cnt_location {
	.form-control;
	.make-sm-column(7, 0);
	padding: 2px 10px;
	margin-bottom: 10px;
}

.portrait-cnt_children-action {
	.make-sm-column(5, 0);
	margin-top: 5px;
	text-align: right;
	.portrait-cnt_children-action_i {
		font-weight: normal;
		margin: 0 0 0 15px;
		label {
			margin: 0 0 0 5px;
			vertical-align: top;
		}
	}
}

.btn-save-portrait-info {
	.button-primary;
	float: right;
	padding-left: 30px;
	padding-right: 30px;
}


.portrait-cnt_socnet {
	.make-row(@grid-gutter-width);
	padding: 40px 0;
	text-align: right;

	h3 {
		display: inline-block;
		.make-md-column(3, @grid-gutter-width);
		text-align: left;
		margin-top: 0;
	}

	.portrait-cnt_socnet_text {
		.make-md-column(4, @grid-gutter-width);
	}

	.portrait-cnt_socnet_btns {
		.make-md-column(5, @grid-gutter-width);
		margin-bottom: 10px;
	}
	.btn-socnet{		
		font-size: 35px;
		color: #fff;
		height: 45px;
		width: 45px;
		margin-right: 20px;
		margin-bottom: 5px;
		  .el-icon-vkontakte,
	    .el-icon-facebook,
	    .el-icon-linkedin {
	    	background-color: #fff;
	    	font-size: 45px;
    	}
    	.el-icon-twitter {
    		color: #fff;
    	}
	}
}

.portrait-cnt_contacts {
	margin-bottom: 50px;
}

.portrait-cnt_contacts_i {
	.make-row(@grid-gutter-width);
	margin-bottom: 20px;
}

.portrait-cnt_contacts_field {
	.make-md-column(9, @grid-gutter-width);
	margin-bottom: 10px;
	input {
		.form-control;
		padding: 2px 10px;
	}

	&.__error {
		input {
			border-color: @error-color;
		}
		.el-icon-warning-sign {
			display: block;
		}
	}

	.el-icon-warning-sign {
		display: none;
		color: @error-color;
		font-size: 24px;
		position: absolute;
		right: 15px;
		top: 5px;
	}
}

.portrait-cnt_contacts_btn_w {
	.make-md-column(3, @grid-gutter-width);
}

.portrait-cnt_contacts_btn {	
	.button-primary;
	float: right;
	padding-left: 30px;
	padding-right: 30px;
}
.portrait-cnt_offer_btn {
	.button-primary;
	padding: 15px;
	font-weight: bold;
	width: 100%;
	margin-bottom: 50px;	
}

.portrait-cnt_offer_alert {
	color: @dark-grey-bg;
	padding-left: 30px;
	position: relative;
	.el-icon-warning-sign {
		font-size: 24px;
		position: absolute;
		top: 5px;
		left: 0;
	}
}

.portrait-cnt_offer_list {
	input {
		.form-control;
		margin-bottom: 20px;
		padding: 2px 10px;
	}
}

// 
// Security
// -------------------
.security-cnt {
	border-bottom: 1px solid @border-color;
	text-align: right
}
.security-cnt_list {
	width: 100%;
	margin-bottom: 100px;
	td {
		padding: 10px;
	}
}
.security-cnt_title {
	text-align: right;
	width: 50%;
}
.security-cnt_setting {
	text-align: left;
	width: 50%;
	a {
		color: @link-color;
		cursor: pointer;
		&:hover,
		&:focus,
		&:active {
			text-decoration: none;
		}
	}
}
.security-cnt_btn-save {
	.button-primary;
	padding-right: 30px;
	padding-left: 30px;
}
.security-cnt .security-changepass-form {
  width:50%;
  text-align:left;
}

#refLink {display: inline-block;width: 400px;height: 40px;font-size: 22px;}
.refList {margin-top:15px;}